<template>
  <nav class="coming">
      <li class="coming-li" v-for="item in cominglist">
         
            <div class="coming-poto"><img :src="item.cover.origin" /></div>
            <div class="coming-name">
                <div class="coming-name-left">{{item.name}}</div>
                <div class="coming-name-right"><span>{{item.premiereAt | fliterDate}}</span></div>
            </div>
        
      </li>
  </nav>
</template>
<script>
import $ from 'jquery';
export default {
   data:function(){
       return{
           cominglist:[]
       }
   },
   mounted:function() {
       var url = 'http://localhost:3000/comingsoon?time=' + new Date().getTime() + '&page=1&count=9';
       var that = this;
       $.get(url).then(function(res){
            that.cominglist = res.data.films;

             
       })
   }
}
</script>
<style>
.coming-li{
     margin: 0 17px 17px 17px;
    width: 90%;
    height: 235px;
    list-style: none;
    box-shadow: 0.5px 0.5px 1px #a8a8a8;
}
.coming-poto{
    width: 100%;
    height: 200px;
}
.coming-poto img{
    width: 100%;
    height: 100%;

}
.coming-name-left{
        float: left;
        width: 70%;
        height: 35px;
        font-size: 12px;
        line-height: 35px;
}
.coming-name-right{
        float: right;
        width: 30%;
        height: 35px;
        font-size: 10px;
        color: RGB(245, 162, 125);
        line-height: 35px;
        height: 35px;
        padding-left: 20px;
        box-sizing: border-box;
}
</style>